import React, { useEffect } from "react";
import "./Map.css";
import { message } from "antd";
import {
  giveRequest,
  getbusinfo,
  getstationinfo,
  getlinedata,
} from "../../../lib/apiconfig";
import {
  busicon,
  stationicon,
} from "../../../lib/apiconfig";

const color = ["blue", "red", "black"];

/**
 * @description 展示公交地图
 */
const Map = () => {

  useEffect(() => {
    var map = new window.BMapGL.Map("allmap");    // 创建Map实例
	  map.centerAndZoom(new window.BMapGL.Point(118.846614, 36.710799), 14);  // 初始化地图,设置中心点坐标和地图级别
	  map.enableScrollWheelZoom(true);      //开启鼠标滚轮缩放
    map.setMapType(window.BMAP_NORMAL_MAP);      // 设置地图类型为普通模式
    map.setTrafficOn();                              // 添加交通流量图层

    giveRequest(getbusinfo(0, 1000), "GET", null, res => {
      const status = res.status;
      if ( status === "fail" ) {
        message.error("获取数据失败!");
      } else {
        const data = res.data;

        data.forEach(item => {
          const title = item.linename || "无";
          const msg = "车牌号: " + item.licence + " <br/> 载客量: " + item.busload + " <br/> 时速: " + item.speed;

          var point = new window.BMapGL.Point(item.longitude, item.dimensionality);
          var marker = new window.BMapGL.Marker(point, {
            title: title,
            icon: new window.BMapGL.Icon(busicon, new window.BMapGL.Size(30, 30), {
              anchor: new window.BMapGL.Size(15, 15)
            })
          });

          marker.addEventListener("click", () => {
            map.openInfoWindow(new window.BMapGL.InfoWindow(msg, {
              width: 200,
              height: 100,
              title: title,
              message: title
            }), point);
          });
          map.addOverlay(marker);
        });
      }
    });

    giveRequest(getstationinfo(0, 1000), "GET", null, res => {
      const status = res.status;
      if ( status === "fail" ) {
        message.error("获取数据失败!");
      } else {
        const data = res.data;
        
        data.forEach(item => {
          const title = item.name;
          const msg = "等待人数: " + item.waitingnumber;

          var point = new window.BMapGL.Point(item.longitude, item.dimensionality);
          var marker = new window.BMapGL.Marker(point, {
            title: title,
            icon: new window.BMapGL.Icon(stationicon, new window.BMapGL.Size(18, 18), {
              anchor: new window.BMapGL.Size(9, 18)
            })
          });
          
          marker.addEventListener("click", () => {
            map.openInfoWindow(new window.BMapGL.InfoWindow(msg, {
              width: 200,
              height: 100,
              title: title,
              message: title
            }), point);
          });
          map.addOverlay(marker);
        });
      }
    });

    giveRequest(getlinedata, "GET", null, res => {
      const status = res.status;
      if ( status === "fail" ) {
        message.error("获取数据失败!");
      } else {
        const data = res.data;

        data.forEach(line => {
          var points = [];
          line.data.forEach(p => {
            points.push(new window.BMapGL.Point(p.longitude, p.dimensionality));
          });

          var polyline = new window.BMapGL.Polyline(
            points, 
            {strokeColor: color[line.id-1] ? color[line.id-1] : "blue", strokeWeight: 4, strokeOpacity: 0.8}
          ); 
          map.addOverlay(polyline);
        });
      }
    })
  }, []);

  return (
    <div className="Map-page">
      <div id="allmap"></div>
    </div>
  );
};

export default Map;